<!-- 这个是详情页的番剧单个选集样式 -->
<script setup>
import {ref, defineProps} from "vue"
import { router } from "../router";

/**
 * @image_url ： 图片路径
 * @ji_name : 集数名称
 * @fan_name : 番剧名称
 * @fan_to : 前往观看
 */
const props = defineProps({
    image_url: {type:String},
    ji_name: {type:String},
    fan_name: {type:String},
    fan_to: {type:String}
})

const goToFan = () => {
    router.push(`/anime-player/${props.fan_to}`)
}

</script>

<template>
    <div class="mini_fan_btn_box" @click="goToFan">
        <img :src="props.image_url" alt="" />
        <span class="ji_name">{{ props.ji_name }}</span>
        <span class="fan_name">{{ props.fan_name }}</span>
    </div>
</template>

<style scoped>
.mini_fan_btn_box{
    margin-left: 30px;
    width: 30%;
    height: 80%;
    background-color: #f4f5f7;
    border-radius: 5px;
    display: flex;
}
.mini_fan_btn_box:hover{
    color: skyblue;
    cursor: pointer;
}
.mini_fan_btn_box img{
    width: 40%;
    height: 100%;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.ji_name{
    margin: 3%;
    font-size: 12px;
}
.fan_name{
    position: relative;
    left: -12%;
    top: 40%;
    font-size: 14px;
}
</style>